<!-- tab切换视频 -->
<template>
  <div class="video-view">
    <TabVideo :videos="videos" :position="tabsPosition" v-model:active="active" />
    <!-- 测试 -->
    <div style="margin-top: 20px">
      <button @click="handleChangeOne('1', 'http://xxx')">更换第一个</button>
      <button @click="handleChangeAll">更换所有</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import TabVideo from '@/components/videoView/tabVideo.vue'

const videos = ref([
  {
    id: '1',
    name: '视频监控01',
    url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  },
  {
    id: '2',
    name: '视频监控02',
    url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  },
  {
    id: '3',
    name: '视频监控03',
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  },
])
// tab标签方位
const tabsPosition = ref('left-top') // 可以是 'left-top', 'right-top', 'left-bottom', 'right-bottom', 'left-side', 'right-side'
const active = ref('1')
const handleChangeOne = (id, url) => {
  active.value = id
  const index = id && id - 1
  videos.value[index].url = url
}
//要更改的数据
const newVideos = ref([
  {
    id: '1',
    name: '视频监控01',
    url: 'http://xxx',
  },
  {
    id: '2',
    name: '视频监控02',
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  },
  {
    id: '3',
    name: '视频监控03',
    url: '',
  },
])
const handleChangeAll = () => {
  active.value = '1'
  videos.value = newVideos.value
}
//默认切换到某一个tab
const handleSwitchVideo = (videoId) => {
  active.value = videoId
}
onMounted(() => {
  // 切换
  handleSwitchVideo('3')
})
</script>

<style lang="scss" scoped>
.video-view {
  width: 1212px;
  height: 734px;
  margin: 20px;
}
</style>
